<template>
	<view class="content" style="">
		<view class="" style="border-bottom: 1rpx solid #cccccc;background-color: #fff;padding: 20rpx;">
			<view class="btn" style="">
				新增+
			</view>  
		</view>
		<view class="" style="padding: 20rpx;padding-top: 0;">
			<view v-for="i in 15" class="list-item" style="">
				<view  class="item-top" style="">
				    <!-- 图片部分 -->
				    <view class="item-pic" style="">
				        <image style="height: 100%; width: 100%;" src="http://120.234.27.130:9010/uploads/images/ddc.png" mode="aspectFit"></image>
				    </view>
				    
				    <!-- 文字部分 -->
				    <view class="item-content" style="">
				        <view style="">
				            用户名称: 小陈
				        </view>
				        
						
				    </view>
				</view>
				<view class="item-btn" style="">
					
					
					
				</view>
			</view>
		</view>
		
		

	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.btn{
		border: #dadada solid 1rpx;padding:5rpx 30rpx;border-radius: 30rpx;background-color: #eeeeee;
		width: 13%;
	}
.content{
	background-color: #f4f4f4;height: 100vh;overflow: scroll;
	
}
.list-item{
		border: 1rpx solid #dadada;background-color: #fff;border-radius: 20rpx;
		padding: 2rpx;box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);margin-top: 20rpx;
		.item-top{
			display: flex; justify-content: space-between; padding: 20rpx;
			.item-pic{
				height: 120rpx; width: 40%; display: flex; justify-content: center; align-items: center;
			}
			.item-content{
				width: 60%; display: flex; flex-direction: column; justify-content: center; align-items: center;
				view{
					text-align: center; margin: 5rpx;
				}
			}
		}
	}
</style>
